<template>
  <el-transfer
    v-model="hiddenList"
    class="oms-role-config-box"
    :data="allList"
    :titles="titles"
    :button-texts="buttonTexts"
    filterable
    @change="change"
  />
</template>

<script setup>
import userStore from '@/store/modules/user';
import { HIDDEN_COMPANY_IDS, VISIBLE_COMPANY_IDS } from '@/utils/const';

const props = defineProps({
  visble_companies: {
    type: Array,
    default: () => []
  },
  titles: {
    type: Array,
    default: () => ['可见公司', '不可见公司']
  },
  buttonTexts: {
    type: Array,
    default: () => ['加入左侧', '加入右侧']
  }
});
const emit = defineEmits();

const allList = ref([]);
const hiddenList = ref([]);

const generateData = () => {
  const companyMap = userStore().companyMap || {};
  const list = [];
  Object.keys(companyMap).forEach(id => {
    id = Number(id);
    list.push({
      key: id,
      label: companyMap[id]?.label
    });
  });
  allList.value = list;
  hiddenList.value = HIDDEN_COMPANY_IDS(props.visble_companies);
};
generateData();

function change() {
  emit('changeRole', {
    allList: allList.value,
    hiddenList: hiddenList.value,
    visibleList: VISIBLE_COMPANY_IDS(hiddenList.value)
  });
}
</script>

<style lang="scss" scoped>
.oms-role-config-box {
  --el-transfer-panel-body-height: 230px;
  --el-transfer-filter-height: 28px;
  margin-left: 25px;
  :deep(.el-transfer-panel) {
    width: 280px;
    .el-input {
      padding-bottom: 10px;
    }
    input {
      font-size: 14px;
      padding-left: 1px;
      border-radius: 0;
    }
  }
  :deep(.el-transfer__buttons) {
    width: 160px;
    padding: 0;
    text-align: center;
    button {
      margin: 0;
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  :deep(.el-checkbox__label) {
    font-size: 14px !important;
  }
}
</style>
